<template>
  <el-dialog
    :title="`${channel_data.order_day}--${channel_data.ship_warehouse_name}--${channel_data.platform_name}`"
    width="90%"
    :modelValue="visible"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <el-button class="mt-[6px]" @click="hanleClearSort">清空排序</el-button>
    <VTable ref="tableRef" v-bind="tableOptins"></VTable>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  <OrdersDetail ref="ordersDetailRef" />
</template>
<script setup lang="jsx">
import OrdersDetail from "../ordersDetail/index";
import { logisticsTimelinessChannel } from "../../api.js";
const props = defineProps({
  option: { type: Object, default: () => ({}) },
});
const { option } = toRefs(props);
const emit = defineEmits(["refresh"]);

const visible = ref(false);

const tableRef = ref();
const channel_data = ref({});
const open = (val) => {
  channel_data.value = val;
  visible.value = true;
};

const ordersDetailRef = ref();
const handlePackage = (name, row) => {
  let indicator_type = option.value.order_indicator_type.find(
    (item) => item.label == name
  )?.value;
  if (!indicator_type) return;
  const { order_day, ship_warehouse_id, platform_id, channel_id } = row;
  let obj = {
    order_day,
    ship_warehouse_id,
    platform_id,
    indicator_type,
    channel_id,
  };
  ordersDetailRef.value.open(obj);
};

const getOrderBy = (sorts = []) => {
  const order_by = {};
  sorts.forEach(({ field, order }) => {
    if (order) {
      let mappedItem = option.value?.order_indicator_type?.find(
        (item) => item.label == field
      )?.value;
      const backendField = mappedItem || field;
      order_by[backendField] = order.toUpperCase();
    }
  });
  return order_by;
};
const hanleClearSort = () => {
  tableRef.value.$table.clearSort();
  tableRef?.value.$table.commitProxy("query");
};
const tableOptins = reactive({
  tooltipConfig: {
    showAll: false,
  },
  height: 600,
  border: true,
  isToggle: true,
  // sortConfig: {
  //   multiple: true,
  //   remote: true,
  // },
  columns: [
    { title: "运输方式", width: 200, field: "channel_name", fixed: "left" },
    {
      title: "包裹总数",
      width: 120,
      sortable: true,
      field: "total_package_cnt",
      slots: {
        default: ({ row }) => {
          if (row.total_package_cnt) {
            return (
              <el-link
                type="primary"
                onClick={() => handlePackage("total_package_cnt", row)}
              >
                {row.total_package_cnt}
              </el-link>
            );
          } else {
            return <div>{row.total_package_cnt}</div>;
          }
        },
      },
    },
    {
      title: "总重量(KG)",
      width: 160,
      field: "total_weight_kg",
      sortable: true,
    },
    {
      title: "总体积(CBM)",
      width: 160,
      field: "total_volume_cbm",
      sortable: true,
    },
    {
      title: "总运费(CNY)",
      width: 160,
      field: "total_freight_cny",
      sortable: true,
    },
    {
      title: "24小时内上网",
      align: "center",
      children: [
        {
          field: "online_1di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.online_1di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("online_1di_package_cnt", row)}
                  >
                    {row.online_1di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_1di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_1di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "48小时内上网",
      align: "center",
      children: [
        {
          field: "online_2di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.online_2di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("online_2di_package_cnt", row)}
                  >
                    {row.online_2di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_2di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_2di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "72小时内上网",
      align: "center",
      children: [
        {
          field: "online_3di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.online_3di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("online_3di_package_cnt", row)}
                  >
                    {row.online_3di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_3di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_3di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "96小时内上网",
      align: "center",
      children: [
        {
          field: "online_4di_package_cnt",
          title: "包裹",
          sortable: true,
          width: 100,
          slots: {
            default: ({ row }) => {
              if (row.online_4di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("online_4di_package_cnt", row)}
                  >
                    {row.online_4di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_4di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_4di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "超期上网",
      align: "center",
      children: [
        {
          field: "online_overdue_package_cnt",
          title: "包裹",
          sortable: true,
          width: 100,
          slots: {
            default: ({ row }) => {
              if (row.online_overdue_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("online_overdue_package_cnt", row)
                    }
                  >
                    {row.online_overdue_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_overdue_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_overdue_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "未上网",
      align: "center",
      children: [
        {
          field: "online_waiting_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.online_waiting_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("online_waiting_package_cnt", row)
                    }
                  >
                    {row.online_waiting_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.online_waiting_package_cnt}</div>;
              }
            },
          },
        },
        { field: "online_waiting_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "24小时内出库",
      align: "center",
      children: [
        {
          field: "ostock_1di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.ostock_1di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("ostock_1di_package_cnt", row)}
                  >
                    {row.ostock_1di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_1di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_1di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "48小时内出库",
      align: "center",
      children: [
        {
          field: "ostock_2di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.ostock_2di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("ostock_2di_package_cnt", row)}
                  >
                    {row.ostock_2di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_2di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_2di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "72小时内出库",
      align: "center",
      children: [
        {
          field: "ostock_3di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.ostock_3di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("ostock_3di_package_cnt", row)}
                  >
                    {row.ostock_3di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_3di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_3di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "96小时内出库",
      align: "center",
      children: [
        {
          field: "ostock_4di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.ostock_4di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("ostock_4di_package_cnt", row)}
                  >
                    {row.ostock_4di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_4di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_4di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "超期出库",
      align: "center",
      children: [
        {
          field: "ostock_overdue_package_cnt",
          title: "包裹",
          sortable: true,
          width: 100,
          slots: {
            default: ({ row }) => {
              if (row.ostock_overdue_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("ostock_overdue_package_cnt", row)
                    }
                  >
                    {row.ostock_overdue_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_overdue_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_overdue_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "未出库",
      align: "center",
      children: [
        {
          field: "ostock_waiting_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.ostock_waiting_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("ostock_waiting_package_cnt", row)
                    }
                  >
                    {row.ostock_waiting_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.ostock_waiting_package_cnt}</div>;
              }
            },
          },
        },
        { field: "ostock_waiting_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "24小时内签收",
      align: "center",
      children: [
        {
          field: "finish_1di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_1di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("finish_1di_package_cnt", row)}
                  >
                    {row.finish_1di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_1di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_1di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "48小时内签收",
      align: "center",
      children: [
        {
          field: "finish_2di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_2di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("finish_2di_package_cnt", row)}
                  >
                    {row.finish_2di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_2di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_2di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "72小时内签收",
      align: "center",
      children: [
        {
          field: "finish_3di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_3di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("finish_3di_package_cnt", row)}
                  >
                    {row.finish_3di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_3di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_3di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "96小时内签收",
      align: "center",
      children: [
        {
          field: "finish_4di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_4di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() => handlePackage("finish_4di_package_cnt", row)}
                  >
                    {row.finish_4di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_4di_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_4di_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "超期签收",
      align: "center",
      children: [
        {
          field: "finish_overdue_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_overdue_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("finish_overdue_package_cnt", row)
                    }
                  >
                    {row.finish_overdue_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_overdue_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_overdue_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "未签收",
      align: "center",
      children: [
        {
          field: "finish_waiting_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.finish_waiting_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("finish_waiting_package_cnt", row)
                    }
                  >
                    {row.finish_waiting_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.finish_waiting_package_cnt}</div>;
              }
            },
          },
        },
        { field: "finish_waiting_package_cnt_rate", title: "占比", width: 100 },
      ],
    },
    {
      title: "24小时内推单-上网",
      align: "center",
      children: [
        {
          field: "push_online_1di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.push_online_1di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("push_online_1di_package_cnt", row)
                    }
                  >
                    {row.push_online_1di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.push_online_1di_package_cnt}</div>;
              }
            },
          },
        },
        {
          field: "push_online_1di_package_cnt_rate",
          title: "占比",
          width: 100,
        },
      ],
    },
    {
      title: "48小时内推单-上网",
      align: "center",
      children: [
        {
          field: "push_online_2di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.push_online_2di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("push_online_2di_package_cnt", row)
                    }
                  >
                    {row.push_online_2di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.push_online_2di_package_cnt}</div>;
              }
            },
          },
        },
        {
          field: "push_online_2di_package_cnt_rate",
          title: "占比",
          width: 100,
        },
      ],
    },
    {
      title: "72小时内推单-上网",
      align: "center",
      children: [
        {
          field: "push_online_3di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.push_online_3di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("push_online_3di_package_cnt", row)
                    }
                  >
                    {row.push_online_3di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.push_online_3di_package_cnt}</div>;
              }
            },
          },
        },
        {
          field: "push_online_3di_package_cnt_rate",
          title: "占比",
          width: 100,
        },
      ],
    },
    {
      title: "96小时内推单-上网",
      align: "center",
      children: [
        {
          field: "push_online_4di_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.push_online_4di_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("push_online_4di_package_cnt", row)
                    }
                  >
                    {row.push_online_4di_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.push_online_4di_package_cnt}</div>;
              }
            },
          },
        },
        {
          field: "push_online_4di_package_cnt_rate",
          title: "占比",
          width: 100,
        },
      ],
    },
    {
      title: "超期推单-上网",
      align: "center",
      children: [
        {
          field: "push_online_overdue_package_cnt",
          title: "包裹",
          width: 100,
          sortable: true,
          slots: {
            default: ({ row }) => {
              if (row.push_online_overdue_package_cnt) {
                return (
                  <el-link
                    type="primary"
                    onClick={() =>
                      handlePackage("push_online_overdue_package_cnt", row)
                    }
                  >
                    {row.push_online_overdue_package_cnt}
                  </el-link>
                );
              } else {
                return <div>{row.push_online_overdue_package_cnt}</div>;
              }
            },
          },
        },
        {
          field: "push_online_overdue_package_cnt_rate",
          title: "占比",
          width: 100,
        },
      ],
    },
  ],
  proxyConfig: {
    props: {
      sort: "order_by",
      sortField: "field",
      sortOrder: "order",
    },
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form, sorts }) => {
        const order_by = getOrderBy(sorts);
        let params = Object.assign({}, form, channel_data.value);
        return logisticsTimelinessChannel({ ...params, ...page, order_by });
      },
    },
  },
});
const handleClose = async (refresh) => {
  visible.value = false;
  if (refresh) emit("refresh");
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
